import { View } from '@tarojs/components';
import clsx from 'clsx';
import './index.scss';

const QBaseDialog = (props) => {
  const {
    children, maskClose = true, visible = false, onClose, className,
  } = props;

  function clickMask() {
    if (maskClose && onClose) {
      onClose();
    }
  }

  return (
    visible
      ? (
        <View className={clsx('dialog-container', className)}>
          <View className="dialog-mask" onClick={clickMask} />
          <View className="dialog">
            {children}
          </View>
        </View>
      ) : null
  );
};

export default QBaseDialog;
